<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: aqua;
        }

        .mask {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>

    <!-- name是data的数据可以使用 -->
    <!-- name1是全局变量，不能使 -->
    <!-- v-for 用于渲染 -->
    <!-- v-if 用于判断 控制标签是渲染否不选-->
    <!-- v-show 用于判断 控制标签是否展示（display）-->
    <!-- v-html -->
    <!-- v-text =={{ele}}   <b>你好</b>-->
    <!-- v-on  ==  @    简写：用于绑定事件 -->
    <!-- v-bind  ==  :-->
    <!-- 普通标签 -->
    <div id="app">
        <h2>{{message}}</h2>
        <span>{{name}}</span>
        <ul v-for="(item,index) in arr">
            <li>
                <b v-if="index>2">{{item}}</b>
                <b v-else-if="index==1">"啦啦啦"</b>
                <b v-else>"zezeze"</b>
                <!-- <b>{{index}}</b> -->
            </li>
        </ul>
        <!-- 弹窗 -->
        <button @click="show=true">打开</button>
        <div class="mask" v-show='show'>
            <span @click="show=false">X</span>
            <p>弹窗</p>
        </div>

        <!-- 选项卡 -->
        <ul 
        v-for="(item,index) in list"
        @click="activeindex=index"
        :style="{color:activeindex==index  ? 'red' : ''}"
        >
            {{item.title}}
        </ul>
        <p v-for="(item,index) in list[activeindex].child">
            {{item}}
        </p>
    </div>


    <script src="./vue.js"></script>
    <script>
        const vue = new Vue({
            el: "#app",
            data: {
                message: "耶斯莫拉",
                name: "居家乐dgd",
                show: false,
                activeindex: 0,
                arr: [1, 2, 3, 4, 5],
                list: [{
                    title: '标题1',
                    child: ['杨旭', '情书', 'tmg', '王荣喜']
                }, {
                    title: '标题2',
                    child: ['账号借钱', '张浩杰', 'tmg', '一个亿']
                }, {
                    title: '标题3',
                    child: ['双十一', '依旧', '一个人', '剁手']
                },]
            }
        })
    </script>
</body>

</html>